/** * @name 签约-左侧菜单 * @description: * @param * @return */
<template>
	<u-sticky z-index="1">
	<view class="leftMenu">
		
			<!-- 当前显示高亮 -->
			<view
				:class="['chooseBtn', { locking: isLock }, { weekActive: index == currentWeekday }]"
				v-for="(item, index) of tabbar"
				:key="index"
				@click="chooseWeekday(index, item.job)"
			>
				<!-- 今日文字高亮显示 -->
				<view :class="{ changeText: item.name == '今日' }">{{ item.name }}</view>
			</view>
		
	</view>
	</u-sticky>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapMutations } = createNamespacedHelpers('signModule');
import { formDate } from '@/utils/formDate.js';
import { getWeek } from '@/utils/getWeekDay.js';
export default {
	data() {
		return {
			currentWeekday: 0, //当前星期
			tabbar: []
		};
	},
	watch: {
		currentWeekday: {
			//监听当前选中的日期
			handler(current) {
				let weekdayIdx = new Date().getDay() - 1;
				let isCurrentDay = false; //是否为今日
				if (weekdayIdx === -1) {
					//对星期日做处理
					weekdayIdx = 6;
				}
				if (weekdayIdx === current) {
					isCurrentDay = true;
				}
				this.GET_isCurrentDay(isCurrentDay);
			},
			immediate: true
		}
	},
	methods: {
		...mapMutations(['GET_isCurrentDay']),
		chooseWeekday(index, dates) {
			this.currentWeekday = index;
			this.$emit('changeWeekDay', dates);
		},
		changeWeekday() {
			//改变今日文字显示
			let weekdayIdx = new Date().getDay() - 1;
			if (weekdayIdx === -1) {
				//对星期日做处理
				this.currentWeekday = 6;
				this.tabbar[this.currentWeekday].name = '今日';
			} else {
				this.currentWeekday = weekdayIdx;
				this.tabbar[this.currentWeekday].name = '今日';
			}
		}
	},
	created() {
		this.tabbar = getWeek(formDate(new Date())); //获取当前的一周
		this.changeWeekday(); //改变今日文字显示
	}
};
</script>

<style lang="scss" scoped>
.leftMenu {
	border: 1rpx solid #f8f1f1;
	border-top-right-radius: 25rpx;
	border-bottom-right-radius: 25rpx;
	overflow: hidden;
	margin-left: -5px;
	.chooseBtn {
		border-bottom: 1rpx solid #f8f1f1;
		padding: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}
	.chooseBtn:last-child {
		border-bottom: 0;
	}

	.locking {
		//锁定状态
		background: #b5b5b5;
	}
}

.weekActive {
	background: linear-gradient(#fde054, #ffc756) !important;
	color: #ff0000;
}

.changeText {
	color: #f43a3d;
	text-align: center;
	line-height: 40rpx;
}
</style>
